<template>
	<view class="group" :style="'padding-bottom:'+pdbottom+'rpx;'">
		<view class="group_tabs_box" @click="joinGroup()">
			<image class="join_group_img" :src="onlinePic+'join_group_img.png'"></image>
		</view>
		<view class="group_cell_box">
			<view class="group_cell" v-for="(item,index) in mygrouplist" :key="index"
				@click="goinfo(item.club_id,item.title)">
				<image class="group_cell_img" :src="picUrl+item.pic" mode="aspectFill"></image>
				<view class="group_mask_box" v-if="item.pic"></view>
				<view class="group_content_box">
					<view class="group_carmodel">{{item.car_model?item.car_model:'SUBARU'}}</view>
					<view class="group_name">{{item.title}}</view>
				</view>
				<view class="join_is_my_box"
					:style="item.is_my==1?'background: linear-gradient(to right, #00A0DC, #0E60E7);':'background-color: rgba(0, 0, 0, 0.75);'">
					<view class="display_flex">
						<view class="display_flex flex-1">
							<view class="display_flex">
								<image class="group_mask_icon"
									:src="item.is_my==1?onlinePic+'group_user_icon_w.png':onlinePic+'group_user_icon.png'">
								</image>
								<view class="ml-5 c-white f-10">{{item.join_count}} 成员</view>
							</view>
							<view class="display_flex ml-15">
								<image class="group_mask_icon"
									:src="item.is_my==1?onlinePic+'group_active_icon_w.png':onlinePic+'group_active_icon.png'">
								</image>
								<view class="ml-5 c-white f-10">{{item.huodong_count}} 场活动</view>
							</view>
						</view>
						<view class="display_flex f-10 c-white">
							<view v-if="item.is_my==1">已加入</view>
							<view v-if="item.is_my==1" class="ml-15 mr-15">|</view>
							<view>查看详情</view>
						</view>
					</view>
				</view>
				<view class="trapezium_img_boxd" v-if="item.city_name">
					<view class="trapezium_img_box">
						<image class="trapezium_img" :src="picUrl+item.city_icon"></image>
						<view class="trapezium_text">
							{{item.city_name.length>8?item.city_name.substring(0,8):item.city_name}}
						</view>
					</view>
				</view>
			</view>
			<view class="group_cell" v-for="(item,index) in list" :key="index" @click="goinfo(item.club_id,item.title)">
				<image class="group_cell_img" :src="picUrl+item.pic" mode="aspectFill"></image>
				<view class="group_mask_box" v-if="item.pic"></view>
				<view class="group_content_box">
					<view class="group_carmodel">{{item.car_model?item.car_model:'SUBARU'}}</view>
					<view class="group_name">{{item.title}}</view>
				</view>
				<view class="join_is_my_box"
					:style="item.is_my==1?'background: linear-gradient(to right, #00A0DC, #0E60E7);':'background-color: rgba(0, 0, 0, 0.75);'">
					<view class="display_flex">
						<view class="display_flex flex-1">
							<view class="display_flex">
								<image class="group_mask_icon"
									:src="item.is_my==1?onlinePic+'group_user_icon_w.png':onlinePic+'group_user_icon.png'">
								</image>
								<view class="ml-5 c-white f-10">{{item.join_count}} 成员</view>
							</view>
							<view class="display_flex ml-15">
								<image class="group_mask_icon"
									:src="item.is_my==1?onlinePic+'group_active_icon_w.png':onlinePic+'group_active_icon.png'">
								</image>
								<view class="ml-5 c-white f-10">{{item.huodong_count}} 场活动</view>
							</view>
						</view>
						<view class="display_flex f-10 c-white">
							<view v-if="item.is_my==1">已加入</view>
							<view v-if="item.is_my==1" class="ml-15 mr-15">|</view>
							<view>查看详情</view>
						</view>
					</view>
				</view>
				<view class="trapezium_img_boxd" v-if="item.city_name">
					<view class="trapezium_img_box">
						<image class="trapezium_img" :src="picUrl+item.city_icon"></image>
						<view class="trapezium_text">
							{{item.city_name.length>8?item.city_name.substring(0,8):item.city_name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
		<view class="group_search_box" @click="goGroupSearch">
			<image class="group_search_img" :src="onlinePic+'group_search.png'"></image>
		</view>
		<view v-if="isDraw" class="group_draw_tips_box" @click="goDrawPage">
			<image class="draw_tips_img" :src="picUrl+lotteryinfo.icon"></image>
		</view>
		<tab-Bar :tabbarnum="1" :myNoticeNum="isDot" :random="random"></tab-Bar>
	</view>

</template>

<script>
	import {
		getClubList,
		getCityList,
		getCompanyList,
		noticeTemplate,
		getUserCityClubList,
		getOtherCityClubList,
		getLotteryInfo
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				params: {
					page: 1,
					size: 10,
					city_id: ''
				},
				tabsNum: 1,
				mygrouplist: [],
				list: [],
				loadingTitle: '',
				isDot: 0,
				isDraw: false,
				lotteryinfo: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				btnbottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 20 : 10,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					130 : 130,
			};
		},
		onShow() {
			if (uni.getStorageSync('onload') || uni.getStorageSync('groupload')) {
				uni.showLoading({})
				this.userinfo = uni.getStorageSync('userinfo')
				this.city_id = uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').city_id : ''
				this.params.city_id = uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').city_id : ''
				this.params.page = 1
				this.list = []
				this.mygrouplist = []
				this.getUserCityClubList()
				uni.removeStorage({
					key: 'onload'
				})
				uni.removeStorage({
					key: 'groupload'
				})
			}
			if (uni.getStorageSync('userinfo')) {
				if (uni.getStorageSync('userinfo').msg_number > 0 || uni.getStorageSync('userinfo').msg_comment_number >
					0) {
					this.isDot = true
				} else {
					this.isDot = false
				}
			}
			if (uni.getStorageSync('access_token')) {
				this.getLotteryInfo()
			}
		},
		onLoad() {
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.params.page = 1
				this.list = []
				this.mygrouplist = []
				this.city_id = uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').city_id : ''
				this.params.city_id = uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').city_id : ''
				if (!uni.getStorageSync('groupload') && !uni.getStorageSync('onload')) {
					this.getUserCityClubList()
				}

			} else {
				console.log('group_page===')
				uni.navigateTo({
					url: '/pages/login/login'
				})
				this.loadingTitle = "- 暂无更多 -"
			}
			var params = {
				event_code: '车友会',
				path: 'pages/group/group',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
			uni.hideTabBar()
		},
		methods: {
			getLotteryInfo() {
				getLotteryInfo().then(res => {
					if (res.state == 1) {
						this.lotteryinfo = res.data.info
						if (res.data.info.status == 0) {
							this.isDraw = false
						} else if (res.data.info.status == 1 || res.data.info.status == 2) {
							this.isDraw = true
						}

					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getUserCityClubList() {
				getUserCityClubList({
					city_id: uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').city_id : ''
				}).then(res => {
					if (res.state == 1) {
						this.mygrouplist = res.data.list
						this.getOtherCityClubList()
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},

			getOtherCityClubList() {
				getOtherCityClubList(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubList() {
				getClubList(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			joinGroup() {
				if (uni.getStorageSync('access_token')) {
					// #ifdef  MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['kwpV3YHFx0TJQXZGE1dmXyPuKB5KEhhxSols7MgJYKk'],
						success: function(res) {
							console.log(res)
							noticeTemplate({
								template_type: 4 //4:车友会；5:活动报名结果；6:活动创建结果
							}).then(res => {
								if (res.state == 1) {
									uni.navigateTo({
										url: '/pages/group/groupjoin'
									})
								} else {

								}
							})
						},
						fail: function(e) {
							console.log('==fail==')
							console.log(e)
						}
					})
					// #endif
					// #ifndef  MP-WEIXIN
					uni.navigateTo({
						url: '/pages/group/groupjoin'
					})
					// #endif
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				var params = {
					event_code: '车友会',
					path: 'pages/group/group',
					event_id: '',
					title: '',
					source_page: '申请加入车友会',
					value: '',
				}
				app.BurialPoint(params)
			},
			goinfo(club_id, club_name) {
				var params = {
					event_code: '车友会',
					path: 'pages/group/group',
					event_id: club_id,
					title: club_name,
					source_page: '点击车友会',
					value: '',
				}
				app.BurialPoint(params)
				uni.navigateTo({
					url: '/pages/group/groupinfo?club_id=' + club_id
				})

			},
			goGroupSearch() {
				uni.navigateTo({
					url: '/pages/group/groupsearch'
				})
			},
			goDrawPage() {
				if (this.lotteryinfo.status == 1) {
					uni.navigateTo({
						url: '/pages/draw/draw'
					})
				} else if (this.lotteryinfo.status == 2) {
					uni.navigateTo({
						url: '/pages/draw/draw'
					})
				}
				var params = {
					event_code: '车友会',
					path: 'pages/group/group',
					event_id: '',
					title: '',
					source_page: '立即抽奖',
					value: '',
				}
				app.BurialPoint(params)
			},
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getUserCityClubList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getOtherCityClubList()
				uni.showLoading({
					title: '加载中'
				})
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: '斯巴鲁官方车友会',
				imageUrl: this.list.length > 0 ? this.picUrl + this.list[0].pic : ''
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.group {

		.group_tabs_box {
			padding: 30rpx;
			position: sticky;
			top: 0;
			z-index: 5;
			background-color: #f7f7f7;

			.join_group_img {
				width: 100%;
				height: 110rpx;
				vertical-align: middle;
			}
		}

		.group_cell_box {
			padding: 10rpx 30rpx;

			.group_cell {
				width: 100%;
				position: relative;
				margin-bottom: 30rpx;

				.join_is_my_box {
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 18rpx 50rpx;
					z-index: 2;
					border-bottom-right-radius: 8rpx;
					border-bottom-left-radius: 8rpx;

					.group_mask_icon {
						width: 25rpx;
						height: 25rpx;
					}

					.group_check {
						width: 114rpx;
						height: 36rpx;
					}
				}

				.group_cell_img {
					width: 100%;
					height: 340rpx;
					vertical-align: middle;
					border-radius: 8rpx;
				}

				.group_mask_box {
					position: absolute;
					top: 0;
					right: 50%;
					bottom: 0;
					left: 0;
					z-index: 1;
					background: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
					border-top-left-radius: 8rpx;
					border-bottom-left-radius: 8rpx;
				}

				.group_content_box {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: 2;
					padding: 40rpx 50rpx;

					.group_carmodel {
						color: #ffffff;
						font-size: 26rpx;
						letter-spacing: 1rpx;
					}

					.group_carmodel_bottom {
						width: 20rpx;
						height: 4rpx;
						margin-top: 10rpx;
						background-color: #00A0DC;
					}

					.group_name {
						color: #ffffff;
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 5rpx;
						letter-spacing: 1rpx;
					}

					.group_mask_icon {
						width: 25rpx;
						height: 25rpx;
					}

					.group_check {
						width: 114rpx;
						height: 36rpx;
					}
				}
			}
		}

		.group_search_box {
			position: fixed;
			bottom: 16%;
			right: -2rpx;
			z-index: 2;

			.group_search_img {
				width: 262rpx;
				height: 88rpx;
				vertical-align: middle;
			}
		}

		.group_draw_tips_box {
			position: fixed;
			z-index: 2;
			bottom: 24%;
			right: 30rpx;

			.draw_tips_img {
				width: 150rpx;
				height: 127rpx;
			}
		}
	}
</style>